<template>
<modal :show.sync="show" v-ref:modal big backdrop="false">
  <header slot="modal-header" class="modal-header"style="  height: 150px;
    padding-bottom: 0px;">
    <button type="button" class="close" @click="close"><span>&times;</span></button>
    <h3 style="font-size:2;font-weight: bolder;" class="modal-title"><span>详细信息</span></h3>
    <br/>
    <h4 style="font-size:2;font-weight: bolder;" class="modal-title"><span>汇总信息</span></h4>
    <div class="t1" style="background-color: #99cd99;">
      <div class="form-group">
        <div class="col-sm-12">
          <center>
            <span class="font1">领表人{{arr.f_receiver}}</span> </center>
          <br />
          <span class="font1">已安装：{{arr.r1}}</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

          <span class="font1">已领表块数：{{arr.r}}</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
          <span class="font1">已退回：{{arr.r2}}</span>
        </div>
      </div>
    </div>
  </header>
  <br/>
  <article slot="modal-body" class="modal-body" style="  height: 450px;
    padding-bottom: 0px;">
    <h4 style="font-size:2;font-weight: bolder;" class="modal-title"><span>详细信息</span></h4>
    <div class="col-sm-12">
      <criteria-paged :model="model" v-ref:jxdk>
        <criteria partial='criteria' @condition-changed='search'>
          <div class="form-group" partial novalidate>
          </div>
        </criteria>
        <data-grid :model="model" partial="list" :is-fixed='false' class="col-sm-12">
          <template partial='head'>
            <tr>
              <th><nobr>序号</nobr></th>
              <th><nobr>表号</nobr></th>
              <th><nobr>状态</nobr></th>
              <th><nobr>领取时间</nobr></th>
              <th><nobr>安装时间</nobr></th>
              <th><nobr>安装地址</nobr></th>
              <th><nobr>登记人</nobr></th>
            </tr>
          </template>
          <template partial='body'>
            <tr>
              <td><nobr>{{$index+1}}</nobr></td>
              <td><nobr>{{row.f_meternumber}}</nobr></td>
              <td><nobr>{{row.f_state}}</nobr></td>
              <td><nobr>{{row.f_receiverdate}}</nobr></td>
              <td><nobr>{{row.f_sinstalldate}}</nobr></td>
              <td><nobr>{{row.f_address}}</nobr></td>
              <td><nobr>{{row.f_operator}}</nobr></td>
            </tr>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
  </article>
  <footer slot="modal-footer" class="modal-footer">
  </footer>
</modal>
</template>
<script>
import {
  PagedList
} from 'vue-client'
export default {
  title: '微信回复',
  data () {
    return {
      model: new PagedList('rs/sql/singleTable_OrderBy', 10, {items: "'*'", tablename: "'t_gasmanagement'", orderitem: "'id'"})
    }
  },

  props: ['arr', 'show'],
  watch: {
    'arr' (val) {
      console.log(this.arr.f_receiver)
      var condition = `1=1 and f_receiver= '${this.arr.f_receiver}'`
      console.log(condition)
      this.model.search(condition)
    }
  },
  methods: {
    open (row) {

    },
    confirm (arr) {

    },
    close () {
      this.show = false
      this.$emit('replys', this.show)
    }
  }
}
</script>
<style>
td.role {
  text-align: center;
}

span.font1 {
  font-weight: bold;
  font-size: 17px;
}
</style>
